<template>
<h2>setup和ref的基本使用</h2>
<!--html的模板中是不需要使用.value，ref一般是用来定义一个基本类型的响应式数据-->
<h3>{{count}}</h3>
<button @click="updateCount">更新数据</button>
</template>

<script lang="ts">
//defineComponent函数，目的是定义一个组件，内部可以传入一个配置对象
import { defineComponent, ref } from 'vue';
export default defineComponent({
  //当前组件的名字是APP
  name: 'App',
  //需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化
  //setup 是组合API的入口函数
  setup(){
    //变量
    //let count = 0 //此时的数据并不是响应式的数据（响应式的数据：数据变化，页面跟着渲染变化）
    //ref是一个函数，作用：定义一个响应式的数据,返回一个Ref对象，对象中有一个Value属性，如果需要对数据操作，就调用value属性
    const count = ref(0)
    //方法
    function updateCount(){
     // count++
     count.value++
    }
    //返回一个对象
    return{
      count,
      updateCount
    }
  }
});

</script>